<template>
  <div>
    <!-- visible.sync  使用@close事件会报错，是个坑 -->
    <el-dialog
      title="添加部门"
      :visible="dialogVisible"
      width="45%"
      @close="handleCloseDialog"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="部门名称" prop="name">
          <el-input v-model="form.name" style="width: 80%" placeholder="1-50个字符" />
        </el-form-item>
        <el-form-item label="部门编号" prop="code">
          <el-input v-model="form.code" style="width: 80%" placeholder="1-50个字符" />
        </el-form-item>
        <el-form-item label="部门负责人" prop="manager">
          <el-select v-model="form.manager" placeholder="请选择" style="width: 80%">
            <el-option v-for="item in listEmployee" :key="item.id" :label="item.username" :value="item.username" />
          </el-select>
        </el-form-item>
        <el-form-item label="部门介绍" prop="introduce">
          <el-input v-model="form.introduce" type="textarea" style="width: 80%" placeholder="1-300个字符" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click.native="$emit('close-dialog', false)">取 消</el-button>
        <el-button type="primary" @click="addDepartment">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
// 员工接口
import { getEmployeeSimple } from '@/api/employees'
// 部门相关接口
import { addDepartments, getDepartDetail, updateDepartments } from '@/api/departments'
export default {
  name: 'AddDept',
  props: {
    // 控制弹出层是否显示
    dialogVisible: {
      type: Boolean,
      default: false
    },
    // 点击的数据
    nodeData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 原始数据
    originalData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    // 一：现在有一步没做好，就是最外层的数据无法辨别是否重复，
    // 二：我修改完之后，不点击确定在修改成原来的名字，会提示重复
    const vaildateName = (rule, value, callback) => {
      // 拿到点击部门的数据，查找部门children里是否有数据,根据children对象里的name返回一个包含name的新数组
      let nameList = this.nodeData.children.map(item => item.name)
      // 名称也是一样的，编辑的时候，无法辨别是否重复
      // 有id就代表是关闭

      // 整体思路: 根据当前点击获取的当前数据里的pid，在原始数组去筛选，找到与之匹配的父元素，
      // 然后在拿到父元素里的children中的数组数据，根据拿到的数据返回一个包含当前父级部门下的所有部门的名称
      if (this.form.id) {
        // console.log(this.originalData)
        // console.log(this.nodeData.pid)
        // 根据pid拿到父元素的数据
        const newAllList = this.originalData.filter(item => item.id === this.nodeData.pid)
        console.log(newAllList)
        // 把数据里的children提取出来
        // if (newAllList.length === 0 && newPidthis.length > 0) {
        //   callback()
        //   console.log(3434)
        //   return false
        // }
        const newList = newAllList.length > 0 ? newAllList.map(item => item.children) : []
        // 把children里每一项的name值，生成一个新name数组
        nameList = newList.length > 0 ? newList[0].map(item => item.name) : []

        console.log(nameList)
      }
      // 判断新数组里是否包含输入的校验值
      if (nameList.includes(value)) { // 包含就代表重复
        return callback(new Error('部门名称重复'))
      } else { // 否则就是不重复
        callback()
      }
    }
    // 处理编辑 code 提示重复问题
    // 原因是：现在的自定义表单校验是把所有的 code码都保存到新数组里了，
    // 然后判断当前输入的值，是否和这个列表里的code码重复
    // 因为是编辑，会把当前的数据回显，必定会不通过上面的验证
    // 解决办法： 把点击当前的code，从列表中去除掉，但是表单是双向数据绑定的，没办法拿到固定值，
    // 所有利用了一个第三方的数据来存储当前点击部门的code码
    const vaildateCode = (rule, value, callback) => {
      // console.log(this.nodeData)
      // 根据原始数组，拿到所有的Code码的新数组集合
      let codeList = this.originalData.map(item => item.code)
      // form里有id就代表是编辑
      if (this.form.id) {
        // 根据存储的code码，去数组里筛选，把不相等的筛选出去
        codeList = codeList.filter(itemCode => itemCode !== this.curCode)
      }
      // 判断新数组里的code值，是否包含输入的校验值
      if (codeList.includes(value)) { // 包含就代表重复
        return callback(new Error('部门名称重复'))
      } else { // 否则就是不重复
        callback()
      }
    }
    return {
      form: {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门管理者
        introduce: '' // 部门介绍
      },
      listEmployee: [], // 部门负责人列表
      curCode: '', // 存储当前的code码，为了自定义效验
      curName: '', // 存储当前的部门name
      rules: {
        name: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
          { min: 1, max: 50, message: '字符1~50', trigger: 'blur' },
          { validator: vaildateName, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入部门编号', trigger: 'blur' },
          { min: 1, max: 50, message: '字符1~50', trigger: 'blur' },
          { validator: vaildateCode, trigger: 'blur' }
        ],
        manager: [
          { required: true, message: '选择部门负责人', trigger: 'change' }
        ],
        introduce: [
          { required: true, message: '请输入部门介绍', trigger: 'blur' },
          { min: 1, max: 50, message: '字符1~50', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.hGetEmployeeSimple()
  },
  methods: {
    // 点击叉号按钮
    handleCloseDialog() {
      this.$emit('close-dialog', false)
      // 1.表单数据初始化
      this.form = {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门管理者
        introduce: '' // 部门介绍
      }
      // 2.清除表单校验
      this.$refs.form.resetFields()
    },
    // 获取部门管理人员列表
    async hGetEmployeeSimple() {
      const res = await getEmployeeSimple()
      // console.log(res)
      this.listEmployee = res
    },
    // 添加部门
    addDepartment() {
      this.$refs.form.validate(async(valid) => {
        if (valid) {
          if (this.form.id) {
            await updateDepartments(this.form)
            this.$message.success('编辑部门成功!')
          } else {
            await addDepartments({ ...this.form, pid: this.nodeData.id })
            this.$message.success('添加部门成功!')
          }
          // 通知父组件关闭弹窗，从新拉取数据
          this.$emit('pull-list')
        }
      })
    },
    // 获取回显数据
    async hGetDepartDetail(id) {
      const res = await getDepartDetail(id)
      this.form = res
      this.curCode = res.code // 存储当前部门的code码
      this.curName = res.name // 存储当前部门的name
    }
  }
}
</script>
